import { View, Image } from '@tarojs/components'
import Taro, { useLoad } from '@tarojs/taro'
import './index.scss'
import { createContext, useState, useContext } from 'react'
import CustomSwiper from './components/CustomSwiper'
import VideoPlayer from './components/VideoPlayer'
import { useNavBar } from '@/hooks/util'
import TabBar from '@/components/TabBar'
import Comment from './components/Comment'
import { HomePageContext } from '@/hooks/index'

const list = [
  {
    src: 'http://vjs.zencdn.net/v/oceans.mp4',
    id: 1,
    seekTime: 0,
  },
  {
    src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
    id: 2,
    seekTime: 0,
  },
  {
    src: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
    id: 3,
    seekTime: 0,
  },
  {
    src: 'https://www.w3schools.com/html/movie.mp4',
    id: 4,
    seekTime: 0,
  },
  {
    src: 'https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209105011F0zPoYzHry.mp4',
    id: 5,
    seekTime: 0,
  },
  {
    src: 'https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209104902N3v5Vpxuvb.mp4',
    id: 6,
    seekTime: 0,
  },
  {
    src: 'http://vjs.zencdn.net/v/oceans.mp4',
    id: 7,
    seekTime: 0,
  },
  {
    src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
    id: 8,
    seekTime: 0,
  },
  {
    src: 'http://vjs.zencdn.net/v/oceans.mp4',
    id: 9,
    seekTime: 0,
  },
  {
    src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
    id: 10,
    seekTime: 0,
  },
]
/**
 * 双击点赞爱心
 * @param param0
 * @returns
 */
const Heart = ({ top, left, heartList }) => {
  return (
    <>
      {heartList.map(item => {
        return (
          <View
            style={{
              position: 'fixed',
              zIndex: 999,
              top: top + 'px',
              left: left + 'px',
              pointerEvents: 'none',
              transform: `rotate(${item.rotate}deg)`,
            }}
            key={item.id}
            className="heart_box"
          >
            <Image
              src="data:image/svg+xml,%3c?xml%20version=%271.0%27%20standalone=%27no%27?%3e%3c!DOCTYPE%20svg%20PUBLIC%20%27-//W3C//DTD%20SVG%201.1//EN%27%20%27http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%27%3e%3csvg%20t=%271539708547888%27%20class=%27icon%27%20style=%27%27%20viewBox=%270%200%201024%201024%27%20version=%271.1%27%20xmlns=%27http://www.w3.org/2000/svg%27%20p-id=%271476%27%20xmlns:xlink=%27http://www.w3.org/1999/xlink%27%20width=%27200%27%20height=%27200%27%3e%3cdefs%3e%3cstyle%20type=%27text/css%27%3e%3c/style%3e%3c/defs%3e%3cpath%20d=%27M739.584%2070.592c-92.224%200-177.792%2063.04-228.224%20109.568C460.864%20133.632%20375.36%2070.592%20283.008%2070.592%20108.48%2070.592%200%20176.96%200%20348.16%200%20492.8%20130.688%20608.256%20131.2%20608.64l340.544%20328.512c10.432%2010.432%2024.448%2016.256%2039.552%2016.256s29.056-5.824%2039.296-16l341.248-328.64c30.656-29.376%20130.752-134.848%20130.752-260.544C1022.656%20176.96%20914.176%2070.592%20739.584%2070.592z%27%20p-id=%271477%27%20fill=%27%23e73a57%27%3e%3c/path%3e%3c/svg%3e"
              className="heart_img"
            />
          </View>
        )
      })}
    </>
  )
}

interface SwiperListTypes {
  src: string
  poster: string
  desc: string
  id: string
  seekTime: number
}

export default function Index() {
  const { navHeight, navTop, navWidth } = useNavBar()
  const [swiperList, setSwiperList] = useState<any[]>([])
  const [heartList, setHeartList] = useState<{ id: number; rotate: number }[]>([])
  const [tapX, setTapX] = useState<number>(0)
  const [tapY, setTapY] = useState<number>(0)
  const [commentShow, setCommentShow] = useState(false)
  const [currentItem, setCurrentItem] = useState<Record<string, any>>({}) // 当前播放项
  /**
   * 更新列表
   * @param time
   * @param index
   */
  const updateSwiperList = (timer: number, idx: number) => {
    setSwiperList(prev => {
      return prev.map((item, index) => {
        if (index === idx) {
          item.seekTime = timer
        }
        return item
      })
    })
  }
  /**
   * 获取列表
   */
  const handeleGetList = () => {
    Taro.showLoading()
    setTimeout(() => {
      setSwiperList(prev => {
        return [...prev, ...list]
      })
      Taro.hideLoading()
    }, 1000)
  }
  /**
   * 点赞
   */
  const handleUpvote = (tapX, tapY) => {
    setTapX(parseInt(String(tapX - 20)))
    setTapY(parseInt(String(tapY - 80)))
    // 生成唯一 id
    const heartId = Date.now()
    setHeartList(prev => {
      return [...prev, { id: heartId, rotate: Math.floor(Math.random() * 60) - 30 }]
    })
    // 使用 id 确保删除正确的爱心
    const timer = setTimeout(() => {
      setHeartList(prev => {
        return prev.filter(({ id }) => id !== heartId)
      })
    }, 1000)
    // 组件卸载时清理定时器
    return () => clearTimeout(timer)
  }

  useLoad(() => {
    handeleGetList()
    console.log('Page loaded.')
  })

  return (
    <>
      <View>
        <View
          style={{
            height: navHeight + 'px',
            top: navTop + 'px',
            width: navWidth + 'px',
          }}
          className="header_box flex justify-center align-center"
        >
          <View>热点</View>
          <View>长视频</View>
          <View>关注</View>
          <View>经验</View>
          <View>推荐</View>
        </View>
        <HomePageContext.Provider
          value={{
            swiperList,
            currentItem,
            showComment: curItem => {
              setCurrentItem(curItem)
              setCommentShow(true)
            },
          }}
        >
          <CustomSwiper swiperList={swiperList}>
            {({ item, index, isActive }) => {
              return (
                <VideoPlayer
                  item={item}
                  index={index}
                  isActive={isActive}
                  swiperList={swiperList}
                  commentShow={commentShow}
                  updateSwiperList={updateSwiperList}
                  handeleGetList={handeleGetList}
                  handleUpvote={handleUpvote}
                />
              )
            }}
          </CustomSwiper>
          {/* 评论区组件 */}
          <Comment
            commentShow={commentShow}
            id={currentItem.id || ''}
            hide={() => setCommentShow(false)}
          />
          {/* 双击点赞的爱心 */}
          <Heart top={tapY} left={tapX} heartList={heartList} />
        </HomePageContext.Provider>
      </View>
      <TabBar type="home" />
    </>
  )
}
